<!DOCTYPE html>
<html>
	<head>{#{{{#}
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>kAccount</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
		<link type="text/css" href="css/jquery.dataTables.css" rel="stylesheet" />		
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCdBWJHGYRKxfkSUOGBGMTZIcJCMYY2-4o&sensor=false&language=zh-TW"></script>
		<script type="text/javascript" src="js/heatmap.js"></script>
		<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
		<script type="text/javascript" src="js/util.js"></script>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			var cats = eval({{ cats_json }});
			var itemcomp = eval({{ itemcomp }});
			var addrcomp = eval({{ addrcomp }});
			var cmtcomp = eval({{ cmtcomp }});
			var stats = eval({{ stats }});
			var latlngmap = eval({{ latlngmap }});

			if (screen.width < 1440)
				$('link:eq(1)').after('<link type="text/css" href="css/layout2.css" rel="stylesheet" />');
			else
				$('link:eq(1)').after('<link type="text/css" href="css/layout.css" rel="stylesheet" />');
			google.load('visualization', '1', {packages: ['corechart']});
			$(function() {
				gmap_init();
				init();
			});
			google.setOnLoadCallback(drawChart);
		</script>
	</head>{#}}}#}
	<body style="display: none">
		<div id="header">{#{{{#}
			<h1 style="display: inline">kAccount</h1>
			{% if user %}
			<div style="text-align: right;padding-right: 3em;margin-bottom: 0.5%">
				Hi, {{ user.nickname() }} <a href="{{ logout_url }}" style="text-decoration: underline">Logout</a>
			</div>
			{% endif %}
		</div>{#}}}#}
		<div id="container">
			<!--left sidebar-->
			<div id="left">&nbsp;</div>

			<!--main window-->
			<div id="main">
				<ul>
					<li><a href="#tab-list">List</a></li>
					<li><a href="#tab-stat">Statistics</a></li>
					<li><a href="#tab-map">Map</a></li>
					<li><a href="#tab-heatmap">Heatmap</a></li>
				</ul>
				<div id="tab-list">{#{{{#}
					<table id="table1">
						<thead style="text-align: center">
							<tr><th>Date</th><th>Item</th><th>Value</th><th>Category</th><th>Location</th><th>Comment</th><th>ID</th></tr>
						</thead>
						<tbody>
							{% for e in entries %}
							<tr><td style="width: 7em">{{ e.date.strftime('%Y-%m-%d') }}</td><td>{{ e.item }}</td><td style="width: 10%;text-align: center">{{ e.val }}</td><td style="text-align: center;width: 10%">{{ e.cat }}</td><td>{{ e.loc }}</td><td>{{ e.comment }}</td><td>{{ e.key().id() }}</td></tr>
							{% endfor %}
						</tbody>
					</table>
					<div id="dialog-confirm-delete" title="Delete selected rows">
						<p><span class="ui-icon-alert" style="float: left"></span>Really to delete selected rows?</p>
					</div>
				</div>{#}}}#}
				<div id="tab-stat"></div>
				<div id="tab-map">
					<div id="map_canvas"></div>
				</div>
				<div id="tab-heatmap">
					<div id="heatmap_canvas"></div>
				</div>
			</div>

			<!--right sidebar-->
			<div id="right">
				<div id="datepick"></div>
				<div id="panel">{#{{{#}
					<button id="table_cur_month">List current month</button><br />
					<button id="table_full">List all entries</button><br />
					<button id="addcat">Add a category</button><br />
					<button id="addent">Add an entry</button><br />
					<div id="dialog-addent" title="Add an entry">{#{{{#}
						<p id="addent-info" class="validInfo">Item, Date, Value are required</p>
						<fieldset>
							<label>Item</label>
							<input type="text" id="in-item" />
							<label>Date</label>
							<input type="text" id="in-date" />
							<label>Value</label>
							<input type="text" id="in-val" />
							<label>Category</label>
							<select id="in-cat">
								{% for cat in cats %}
									{% if loop.first %}
									<option value="{{ cat }}" selected="selected">{{ cat }}</option>
									{% else %}
									<option value="{{ cat }}">{{ cat }}</option>
									{% endif %}
								{% endfor %}
							</select>
							<label>Location</label>
							<input type="text" id="in-loc" />
							<label>Comment</label>
							<input type="text" id="in-comment" />
						</fieldset>
					</div>{#}}}#}
					<div id="dialog-addcat" title="Add a category">{#{{{#}
						<p id="addcat-info" class="validInfo">Name must have lenth greater than 0</p>
						<fieldset>
							<label>Name</label>
							<input type="text" id="cat-name" />
						</fieldset>
					</div>{#}}}#}
					<button id="hmap_toggle">Toggle Heatmap type</button><br />
				</div>{#}}}#}
			</div>
		</div>
		<div id="footer"></div>
	</body>
</html>
